<template>
	<view class="All">
		<view class="sc" v-for="(item,index) in cthz" key="item.id">
			<view class="dhz">
				<span class="tb">
					{{item.leiXin}}
				</span>
				<span class="wz">{{item.Timu}}</span>
			</view>
			<view class="dttt">
				<view class="dt" v-for="(item1,index1) in item.xIangone" :key="index1"
					:class="[item.xIangone[index1]==item.zhengque?'klkl':'',item.xIangone[index1]==item.xuanze?'active':'']">
					<text>{{item.xIangone[index1]}}</text>
					<uni-icons class="icon" type="closeempty" color="red" size="25" v-if="item.xIangone[index1]==item.xuanze"></uni-icons>
					<uni-icons class="icon" color="dodgerblue" type="checkmarkempty" size="25" v-else-if="item.xIangone[index1]==item.zhengque"></uni-icons>
				</view>

			</view>
			<view class="footer">
				<p class="Dahe">答案:<span class="da">{{item.zhengque.split('')[0]}}</span>您选择:<span
						class="daaa">{{item.xuanze.split('')[0]}}</span>已答错{{item.num}}次</p>
				<p class="tbbbbb"><uni-icons type="trash-filled" size="30" @click="delit(index)"></uni-icons></p>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'my-cthz',
		data() {
			return {

			};
		},
		computed: {
			...mapState('users', ['cthz'])
		},
		methods: {
			// 删除错题
			delit(index) {
				console.log(index)
				this.cthz.some((item, i) => {
					if (i === index) {
						this.cthz.splice(i, 1)
					}
				})
				uni.setStorageSync('gwc', JSON.stringify(this.cthz))
			}
		}
	}
</script>

<style lang="scss">
	.dt {
		line-height: 50px;
		background-color: rgb(240, 240, 240);
		z-index: 99;
		width: 94%;
		height: 50px;
		padding-left: 10px;
		// background-color: red;
		margin-left: 2%;
		border-radius: 10px 10px 10px 10px;
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
	}
	.icon{
		margin-right: 30px;
		line-height: 50px;
	}

	.active {
		background-color: rgb(255, 240, 240);
	}

	.klkl {
		background-color: rgb(240, 249, 255);
		// color:lightskyblue ;
		z-index: 999;
	}

	.All {
		background-color: rgb(240, 240, 240);

		.sc {
			position: relative;
			letter-spacing: 1px;
			border-radius: 10px 10px 10px 10px;
			margin-left: 3%;
			margin-top: 10px;
			width: 94%;
			height: 350px;
			background-color: white;

			.dhz {
				padding-top: 15px;
				margin-left: 15px;

				.tb {
					color: rgb(229, 140, 58);
					text-align: center;
					line-height: 25px;
					background-color: rgb(253, 232, 207);
					height: 25px;
					width: 500px;
				}

				.tm {
					margin-left: 10px;
					background-color: red;
					height: 30px;
				}

				.wz {
					margin-left: 5px;
				}
			}

			.dttt {
				margin-top: 30px;



			}

		}

		.footer {
			position: absolute;
			top: 300px;
			display: flex;
			justify-content: space-between;
			width: 100%;

			.Dahe {
				margin-left: 15px;
				margin-top: 5px;

				.da {
					color: lightskyblue;
				}

				.daaa {
					color: red;
				}
			}

			.tbbbbb {
				margin-right: 5%;
			}
		}

	}
</style>